<!--
评审方案 组合面板
 -->
<template>
  <el-container>
    <el-header height="auto" class="layout-panel-el-header-wrapper">
      <span class="layout-panel-el-header-wrapper--title">{{ title }}</span>
      <span class="layout-panel-el-header-wrapper--code">{{ _itemCode }}</span>
    </el-header>
    <el-main ref="main" class="layout-panel-el-main-wrapper">
      <el-row class="layout-panel-el-main-wrapper-row">
        <el-col :span="10" class="layout-panel-el-main-wrapper-col P-R-16">
          <ResearchReviewPlan ref="researchReview" />
        </el-col>
        <el-col :span="10" class="layout-panel-el-main-wrapper-col P-R-16">
          <el-row>
            <el-col v-if="shows.answer" :span="24">
              <AnswerInfo :height="height" :expand="true" />
            </el-col>
            <el-col v-if="shows.fault " :span="24">
              <FaultInfo :height="height" class="M-T-16" :expand="true" />
            </el-col>
            <el-col v-if="shows.demand" :span="24">
              <NeedInfo :height="height" :class="shows.fault?' M-T-16':''" :expand="true" />
            </el-col>
            <el-col v-if="shows.research" :span="24">
              <ResearchInfo :height="height" :class=" shows.demand ? 'M-T-16':''" :expand="true" />
            </el-col>
            <el-col :span="24">
              <ProjectInfo :class="shows.project ? 'M-T-16':''" :expand="true" :height="height" />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" class="layout-panel-el-main-wrapper-col">
          <TimeLine />
        </el-col>
      </el-row>

    </el-main>
    <el-footer class="layout-panel-el-footer-wrapper " :height="footerHeight">
      <template v-if="showFooter">
        <pure-button label="提交" :loading="submitButtonLoading" @click="submit" />
      </template>
    </el-footer>
  </el-container>
</template>

<script>
import { mapMutations, } from 'vuex';
import { mixins_base, } from '@/minxins/project';
export default {
  name: 'ReviewPlan',
  components: {
    AnswerInfo: () => import('../panels/answerInfo.vue'),
    FaultInfo: () => import('../panels/faultInfo.vue'),
    NeedInfo: () => import('../panels/needInfo.vue'),
    ProjectInfo: () => import('../panels/projectInfo.vue'),
    ResearchReviewPlan: () => import('../panels/researchViewPlan.vue'),
    ResearchInfo: () => import('../panels/researchInfo.vue'),
    TimeLine: () => import('../timeLine/index.vue'),
  },
  mixins: [mixins_base],
  props: {
    title: {
      type: String,
      default: '需求信息',
    },
    hiddenSaveButton: {
      type: Boolean,
      default: true,
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      height: '',
      submitButtonLoading: false,
      result: {},
    };
  },
  computed: {
    footerHeight() {
      return (this.showFooter ? 60 : 16) + 'px';
    },
    _itemCode() {
      if (this.itemCode) {
        return `需求编号:${this.itemCode}`;
      }
      return '';
    },
    shows() {
      const data = this.getterPanelGroupData;
      return {
        answer: !!data.orderInfo || false,
        fault: !!data.orderFault || false,
        demand: !!data.demand || false,
        research: !!data.investigate || false,
        project: !!data.investigate || false,
      };
    },
    shows_true_num() {
      return (Object.values(this.shows).filter((e) => e)).length || 1;
    },
  },
  updated() {
    this.$nextTick(() => {
      this.computedHeight();
    });
  },
  async created() {
    this.SET_PANCEL_EXPAND({ name: 'projectInfo', expand: true, });
  },
  mounted() {
    this.$nextTick(() => {
      this.computedHeight();
    });
  },

  methods: {
    computedHeight() {
      const mainClientHeight = this.$refs['main'].$el.clientHeight;
      this.height = mainClientHeight - (34 * this.shows_true_num) - (20 * (this.shows_true_num - 1)) + 'px';
    },
    ...mapMutations('project/index', ['SET_PANCEL_EXPAND']),
    async  submit() {
      try {
        this.submitButtonLoading = true;
        await this.$refs['researchReview'].submit();
        this.submitButtonLoading = false;
        this.$emit('done');
      } catch (error) {
        this.submitButtonLoading = false;
        this.$message.error(error);
      } finally {
        this.submitButtonLoading = false;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@import '../../style/project.scss'
</style>
